<template>
  <fieldset>
    <legend>统计信息</legend>
    <div class="archives-count">
      <div class="archives-count-item">
        <code id="post-count" data-num="" title="">{{ statistics.articles }}</code>
        {{$t('articles')}}
      </div>

      <div class="archives-count-item">
        <code id="tag-count" data-num="" title="">{{ statistics.labels }}</code>
        {{$t('labels')}}
      </div>
      <div class="archives-count-item">
        <code id="comment-count" data-num="" title="">{{ statistics.comments }}</code>
        {{$t('comments')}}
      </div>
      <div class="archives-count-item">
        <code id="view-count" data-num="" title="">{{ statistics.ip }}</code>
        {{$t('ip')}}
      </div>
      <div class="archives-count-item">
        <code id="category-count" data-num="" title="">{{ statistics.views }}</code>
        {{$t('views')}}
      </div>
    </div>
  </fieldset>
</template>

<script>
  import { getBlogInfo } from '@/api/category'
  import axios from 'axios'

  export default {
    name: 'source-slot',
    data () {
      return {
        statistics: {
          articles: '-',
          labels: '-',
          comments: '-',
          ip: '-',
          views: '-',
          tongji:{},
        },
      }
    },
    methods: {
      getBlogInfo () {

        getBlogInfo(this.$axios).then(({ data }) => {
          this.statistics.articles = data.data.articleNum + '+'
          this.statistics.labels = data.data.tagNum + '+'
          this.tongji = data.data.tongji
          let pv_count = this.tongji.result.items[1][1].reduce((prev,next)=>prev + next,0)
          let visitor_count = this.tongji.result.items[1][2].reduce((prev,next)=>prev + next,0)
          this.statistics.ip = visitor_count + '+'
          this.statistics.views = pv_count + '+'

        })
      },
      async getCommentsCount () {
        const posts = await axios.get(process.env.BASE_URL + '/article/get', {
          params: {
            pageNo: 1,
            pageSize: 100,
            cmd: 1
          }
        })

        let urls = []
        if (posts.data.code == 200) {
          urls = posts.data.data.map(item => item.articlePermalink).filter(item => item)
          const twikoo = require('twikoo')
          twikoo.getCommentsCount({
            envId: this.$settings.twikoo_env_id, // 环境 ID
            urls,
            includeReply: false // 评论数是否包括回复，默认：false
          }).then( (res)=> {
            if(Array.isArray(res)) {
              let count = res.map(item => item.count).reduce((prev, next) => prev + next, 0)
              if (count > 0)
                this.statistics.comments = count + '+'
            }

          }).catch(function (err) {
            console.error(err)
          })
        }
      }
    },
    fetch(){
      let data = this.$store.state
      this.statistics.articles = data.blogInfo.articleNum + '+'
      this.statistics.labels = data.blogInfo.tagNum + '+'
      if(data.tongji && data.tongji.sum && Array.isArray(data.tongji.sum)) {
        this.statistics.ip = data.tongji.sum[0][1] + '+'
        this.statistics.views = data.tongji.sum[0][0] + '+'
      }

      this.statistics.comments = data.sumArticleComments + '+'
    },
    mounted () {
      //this.getBlogInfo()
      //console.log(this.$store.state.tongji)
      //this.getCommentsCount()
    }
  }
</script>


<style lang="scss" scoped>



  fieldset > legend {
    background-color: #eb5055;
    color: #fff;
    border-radius: .2em;
    padding: .2em .5em;
    font-size: .9em;
  }

  .archives-count {
    width: 100%;
    text-align: center;
    color: #666;
  }

  .archives-count .archives-count-item {
    padding: 0.4em 0 0.6em;
    width: 20%;
    float: left;
    border-radius: 0.3em;
  }


  .archives-count code {
    display: block;
    font-size: 2em;
    color: #707070;
    background: transparent !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .archives-count .archives-count-item:hover {
    background: #e8e8e8;
  }

  @media(max-width: 800px) {
    .archives-count code {
      font-size: 15px;
      text-overflow: clip;
      margin-left: -6px;
      margin-right: -6px;
    }
  }

  @media(max-width: 375px) {
    .archives-count code {
      font-size: 14px;
      text-overflow: clip;
      margin-left: -6px;
      margin-right: -6px;
    }
  }


</style>
